#@laybase() 
#define main()


<style>
	#fuioudqModal .modal-body {
		overflow: auto;
	}
	
	#fuioudqModal .modal-body div {
		line-height: 32px;
	}

	#fuioudqModal .overdueDays .overdueDaysControl {
		display: inline-block;
		border: 1px solid #ccc;
    	line-height: 26px;
    	border-radius: 3px;
	}
	
	.overdueDays .overdueDaysControl i {
		padding: 6px;
	    font-size: 12px;
	    vertical-align: top;
	    background-color: #ededed;
	    color: #585858;
    	font-weight: 700;
    	cursor: pointer;
	}
	
	.overdueDays .overdueDaysControl input {
		height: 26px;
    	width: 30px;
    	border: 0;
	    border-left: 1px solid #ccc;
	    border-right: 1px solid #ccc;
	    text-align: center;
	}

</style>

<div class="modal fade" id="fuioudqModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title">提示</h4>
      </div>
      <div class="modal-body">
                   
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
        <button type="button" class="btn btn-primary confirm" data-loading-text="请稍后...">提交</button>
      </div>
    </div>
  </div>
</div>

<div class="col-md-12">
	<div style="margin-bottom: 15px;"><button type="button" class="btn btn-primary" id="getdk" data-loading-text="请稍后...">发起代扣</button></div>
	<table class="datatable" id="datatable" data-unique-id="id"></table>
</div>

<script>
	$(function(){
		var $table = $('#datatable'),
			modalDom = $("#fuioudqModal"),
			modalBody = modalDom.find(".modal-body"),
			modalTitle = modalDom.find(".modal-title"),
			modalConfirm = modalDom.find(".confirm");
		modalBody.css("height",$(window).height() * .78)
		
		axios.post("/fuioudq/celPayInfo")
		.then(function(res){
			console.log(res.data)
			var data = res.data,
				titles = [],
				$data = data.data
			
			for(var i = 0;i < data.names.length;i++){
				titles.push({
					field: data.fields[i],
					title: data.names[i]
				})
			}
			
			createTable(titles,$data)
		})
		
		//创建表格
		function createTable(titles,data){
			$table.bootstrapTable({
				uniqueId: 'id',	
				pagination: true, 
	            pageSize: 20,
			    columns: titles,
			    data: data,
			    sortStable:true
			});		
		}
		
		
		$("#getdk").click(function(){
			var that = $(this)
			that.button('loading')
			axios.post("/fuioudq/celpayReqData")
			.then(function(res){
				console.log(res.data)
				if(res.data.code == 1){
					randerMsg(res.data.data,function(){
						that.button('reset')
					})
				}else{
					that.button('reset')
					_x.show_alert_sh(res.data.msg,false)
				}
			})
		})
		
		function randerMsg (data, callback) {
			var html = "<div><span>订单号：</span><span>"+ data.orderNo +"</span></div>"+
					   "<div><span>总行名称：</span><span>"+ data.bankName +"</span></div>"+
					   "<div><span>客户姓名：</span><span>"+ data.name +"</span></div>"+
					   "<div><span>客户电话：</span><span>"+ data.phone +"</span></div>"+
					   "<div><span>身份证号码：</span><span>"+ data.idNo +"</span></div>"+
					   "<div><span>银行帐号：</span><span>"+ data.account +"</span></div>"+
					   "<div class='overdueDays'><span>逾期天数：</span><div class='overdueDaysControl'><i class='iconfont minus-hook'>&#xe624;</i><input readonly='readonly' data-price='"+ parseInt(data.overdueFee) +"' data-loanamount='"+ data.loanAmount +"' value='"+ data.overdueDays +"' /><i class='iconfont add-hook'>&#xe621;</i></div><span>&nbsp;&nbsp;天</span></div>"+
					   "<div><span>逾期费用：</span><span class='overdueFee'>"+ parseInt(data.overdueFee) +"</span></div>"+
					   "<div><span>贷款金额：</span><span>"+ data.loanAmount +"</span></div>"+
					   "<div><span>总还款金额：</span><span>"+ data.amt +"</span></div>"+
					   "<div><span>期数：</span><span>"+ data.term +"</span></div>"+
					   "<div><span>项目id：</span><span>"+ data.projectid +"</span></div>"+
					   "<div><span>代扣日期：</span><span>"+ data.reqdt +"</span></div>"+
					   "<div><span>签约日期：</span><span>"+ data.signDate +"</span></div>";
			modalBody.html(html)
			callback()
			modalDom.modal("show")
		}
		
		//加减逾期天数
		modalBody.on("click",".overdueDays i",function(e){
			e.preventDefault();
			console.log($(this).attr("class"))
			var that = $(this),
				inputDom = that.siblings("input"),
				days = inputDom.val(),
				price = inputDom.data("price"),
				loanAmount = inputDom.data("loanamount")
				
			if(that.hasClass("add-hook")){
				days++
			}else if(that.hasClass("minus-hook")){
				days--
				if(days < 0){
					days = 0
				}
			}
			
			price = parseInt(days * 0.005 * loanAmount);
			inputDom.data("price",price)
			modalBody.find(".overdueFee").html(price)
			inputDom.val(days)
		})
		
		modalBody.on("mousedown",".overdueDays i",function(e){
			return false
		})	
		
		modalConfirm.click(function(){
			var that = $(this)
			that.button('loading')
			axios.get("/fuioudq/celpay",{
				params: {
					overdueDays: modalBody.find(".overdueDays").find("input").val()
				}
			})
			.then(function(res){
				console.log(res.data)
				if(res.data.code == 1){
					_x.show_alert_sh(res.data.msg,true)
				}else{
					_x.show_alert_sh(res.data.msg,false)
				}
				modalDom.modal('hide')
				that.button('reset')
			})
			.catch(function(){
				that.button('reset')
				_x.show_alert_sh("代扣失败，请稍后重试！",false)
			})
		})
	})
</script>
#end